<template>
  <a-modal
    v-model:visible="visibleRef"
    :title="`修改${item.label}`"
    :destroyOnClose="true"
    @ok="onOk"
  >
    <div class="content">
      <a-form layout="vertical">
        <template v-if="item.key === 'password'">
          <a-form-item label="原密码" v-bind="validateInfos.password">
            <a-input-password
              v-model:value="form.password"
              placeholder="请输入原密码"
            />
          </a-form-item>
          <a-form-item label="新密码" v-bind="validateInfos.newPassword">
            <a-input-password
              v-model:value="form.newPassword"
              placeholder="密码6-16位，包含数字和字母"
            />
          </a-form-item>
          <a-form-item label="确认新密码" v-bind="validateInfos.newPassword2">
            <a-input-password
              v-model:value="form.newPassword2"
              placeholder="请再次输入密码"
            />
          </a-form-item>
        </template>
        <template v-else>
          <a-form-item :label="item.label" v-bind="validateInfos.curProp">
            <a-radio-group
              v-if="item.key === 'gender'"
              v-model:value="form.curProp"
            >
              <a-radio :value="1">男</a-radio>
              <a-radio :value="2">女</a-radio>
            </a-radio-group>
            <a-input v-else v-model:value="form.curProp" placeholder="请输入" />
          </a-form-item>
        </template>
      </a-form>
    </div>
  </a-modal>
</template>

<script lang="ts">
import { computed, defineComponent, ref, reactive, watchEffect } from 'vue';
import { Form, message } from 'ant-design-vue';
const useForm = Form.useForm;

export default defineComponent({
  name: 'PersonalModal',
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    item: {
      type: Object,
      default: () => ({}),
    },
    userInfo: {
      type: Object,
      default: () => ({}),
    },
  },
  setup(prop, context) {
    const visibleRef = computed({
      get: () => prop.visible,
      set: (value) => context.emit('update:visible', value),
    });
    const form = reactive({
      curProp: '',
      password: '',
      newPassword: '',
      newPassword2: '',
    });
    const formRule = ref({});
    watchEffect(() => {
      if (prop.visible) {
        form.curProp = prop.userInfo[prop.item.key];
        const required = prop.item.key === 'password';
        formRule.value = {
          curProp: [
            { required: !required, trigger: 'change', message: '请输入' },
          ],
          password: [{ required, trigger: 'change', message: '请输入原密码' }],
          newPassword: [
            { required, trigger: 'change', message: '请输入新密码' },
          ],
          newPassword2: [
            { required, trigger: 'change', message: '请再次输入新密码' },
          ],
        };
      }
    });
    const { validate, validateInfos } = useForm(form, formRule);

    const onOk = () => {
      validate().then(() => {
        if (
          prop.item.key === 'password' &&
          form.newPassword !== form.newPassword2
        ) {
          return message.warning('新密码不相等');
        }
        context.emit('onOk', prop.item.key, form);
        visibleRef.value = false;
      });
    };

    return {
      visibleRef,
      form,
      validateInfos,
      onOk,
    };
  },
});
</script>

<style lang="less" scoped>
.content {
  .ant-select {
    width: 100%;
  }
  :deep .ant-select-selector {
    border-radius: 4px;
  }
  :deep .ant-input {
    border-radius: 4px;
  }
}
</style>
